<template>
    <div class="region-area-select-container">
        <div v-if="allRegionData.length" class="select-show-box">
            <ElTreeSelect
                :model-value="globalStore.regionCode"
                :data="allRegionData"
                :props="treeProps"
                :default-expand-all="true"
                :check-on-click-node="true"
                :expand-on-click-node="false"
                :highlight-current="true"
                :check-strictly="true"
                @change="onChangeArea"
                popper-class="reset-el-tree-select-popper"
            />
        </div>
    </div>
</template>

<script setup lang="ts">
import { getAllGridsByCode, getRegionListByCode } from '@/api/index'
import config from '@/config'
import { useGlobalStore } from '@/store/global'

// 全局数据
const globalStore = useGlobalStore()

// 区划数据
const allRegionData = shallowRef<any[]>([])

// 网格数据
const regionKeyGridData = ref<any>({})

// 树属性
const treeProps = {
    label: 'label',
    value: 'code',
    children: 'children',
}

const onChangeArea = (code: string) => {
    const findObj = findNodeInTreeArray(allRegionData.value, code)
    if (findObj) {
        const gridInfo = regionKeyGridData.value[findObj.code]
        globalStore.changeRegionAndGrid({
            regionCode: findObj.code,
            regionName: findObj.label,
            treeId: findObj.id,
            gridCode: gridInfo.gridCode,
            gridName: gridInfo.gridName,
        })
    }
}

const findNodeInTreeArray = (treeArray: any[], targetCode: any) => {
    for (const node of treeArray) {
        // 检查当前节点
        if (node.code === targetCode) {
            return node
        }
        // 递归检查子节点
        if (node.children && node.children.length > 0) {
            const found: any = findNodeInTreeArray(node.children, targetCode)
            if (found) {
                return found
            }
        }
    }
    return null
}

// 获取网格数据
const fetchGridData = async () => {
    try {
        const data = await getAllGridsByCode({
            pageSize: 300,
            pageNum: 1,
            parentGridCode: config.gridCode,
        })
        regionKeyGridData.value[config.regionCode] = {
            gridCode: config.gridCode,
            gridName: config.gridName,
        }
        if (data.list) {
            data.list.forEach((item: any) => {
                regionKeyGridData.value[item.regionCodes] = {
                    gridCode: item.gridCode,
                    gridName: item.gridName,
                }
            })
        }
    } catch (error) {
        console.error(error)
    }
}

const fetchRegionData = async () => {
    try {
        const data = await getRegionListByCode({
            code: config.regionCode,
        })
        const worker = (list: any) => {
            list.forEach((c: any) => {
                if (c.grade === 3) {
                    delete c.children
                } else if (c.children) {
                    worker(c.children)
                }
            })
        }
        worker(data)
        allRegionData.value = data
    } catch (error) {
        console.error(error)
    }
}

onMounted(async () => {
    await fetchGridData()
    fetchRegionData()
})
</script>

<style lang="scss" scoped>
.region-area-select-container {
    position: absolute;
    top: 20px;
    left: 1320px;
    z-index: 3;
    width: 180px;
    height: 37px;
    cursor: pointer;

    .select-show-box {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;

        :deep(.el-select) {
            width: 146px !important;
            font-family: PangMenZhengDao;

            .el-select__wrapper {
                padding: 0 !important;
                font-size: 28px !important;
                font-weight: bolder;
                text-align: right !important;
                background-color: transparent !important;
                box-shadow: none !important;
                color: #fff !important;
            }

            .el-select__placeholder {
                color: #fff !important;
                letter-spacing: 4px;
            }

            .el-icon {
                color: #fff !important;
                font-size: 16px;
                font-weight: bolder;
            }
        }
    }
}
</style>

<style lang="scss">
.reset-el-tree-select-popper {
    height: 410px;

    .el-select-dropdown__wrap {
        max-height: 100% !important;
    }
}
</style>
